<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #d2d6de;
        }
        .loginbox{
            width: 360px;
            height: 320px;
            margin: 50px auto;
            text-align: center;
        }
        h2{
            margin-bottom: 20px;
        }
        .login{
            width: 320px;
            height: 200px;
            background: #fff;
            padding: 20px;
        }
        p{
            height: 12px;
            font-size: 12px;
            line-height: 1;
            margin-bottom: 20px;
        }
        .username,.password{
            width: 295px;
            height:30px;
            float: left;
            margin-bottom: 20px;
            padding-left: 20px;
            background: #e8f0fe;
            border: 1px solid #d2d6de;
        }
       
        .select{
            width: 318px;
            height: 30px;
            overflow: hidden;
            float: left;
        }
        .seimg{
            width: 20px;
            height: 20px;
            float: left;
            margin-right: 5px;
        }
        span{
            float: left;
            font-size: 14px;
            line-height: 30px;
        }
        .check{
            
            width: 20px;
            height: 20px;
            border: 1px solid #999;
            float: left;
            margin-right: 5px;
            margin-top: 5px;
            cursor: pointer;
         
        }
        

        i{
            width: 98px;
            height: 26px;
            background: #3c8dbc;
            display: block;
            float: right;
            border: 2px solid #367fa9;
            font-size: 14px;
            line-height: 28px;
            color: #fff;
            font-style: normal;
            cursor: pointer;
        }
        i:hover{
            background: #367fa9; 
            border: 2px solid #204d74;
        }
        .remeber{
            width: 70px;
            height: 30px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="loginbox">
        <h2>管理员登录</h2>
       
        <div class="login">
                <p>请在此输入您的用户名和密码</p>
                <div class="form-group has-feedback">
                        <input type="text" class="username" placeholder="用户名">
                        <input type="password" class="password" placeholder="密码">
                        <div class='select'>
                            <div class="remeber">
                                    <input type="checkbox" class="check">
                                     <span>记住我</span>
                                    </div> 
                                     <i>登录</i>
                            
                        </div>
                      </div>
        </div>
    </div>
    <script>
        let reme = document.querySelector('.remeber');
        let hidden = document.querySelector('.hidden');
        let show = document.querySelector('.show')
        
           
    
    
    </script>
</body>
</html>